<template>
  <div class="cont">
    <dv-border-box-11 :title="decodeURI(route.query.name)+'-'+chart_pro" class="mapbox">
      <div class="china_map">
        <div id="map" ref="chart"></div>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script setup lang="ts">
const echart = inject("echart");
import { storeToRefs } from "pinia";
import { menuStore } from "@/store/modules/menu";
const menushow: any = menuStore();
let myChart = null;
const title = "近七日驿站接待总人数趋势图";
import chinaMap from "../../assets/json/china.json";
import axios from "axios";
const route = useRoute();
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});
const chart = ref();
const chart_pro = ref("未知");
onMounted(() => {
  getData();

  // console.log("menushow", menushow.menu);
});
onUnmounted(() => {
  console.log(myChart);
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
    menushow.menu=''
    
  }
});

const getData = async () => {
  await axios.get(`/city-map/${decodeURI(route.query.name)}.json`).then(res => {
    //  console.log(res.data);
    
    var provinceMap = res.data;
    // console.log(provinceMap.features.map(v=>v.properties.name));
    initEcharts(provinceMap);
  });
  renderEcharts();
};
const initEcharts = async mapdata => {
  //   myChart = echart.init(document.getElementById("map"));
  // console.log(mapdata.features[0].properties.name);
  chart_pro.value = mapdata.features[0].properties.name;
  if (!menushow.menu) {
    menushow.menu=chart_pro.value
  }
  myChart = echart.init(document.getElementById("map"));
  echart.registerMap("citymap", mapdata);
  // console.log(provinceMap);
};

const renderEcharts = () => {
  myChart.setOption({
    visualMap: {
      min: 0,
      max: 5000,
      show: false,
      splitNumber: 5,
      inRange: {
        color: ["#d94e5d", "#eac736", "#50a3ba"].reverse()
      },
      textStyle: {
        color: "#fff"
      }
    },
    geo: {
      map: "citymap",
      label: {
        // normal: {
        show: true,
        color: "#fff"
        // },
      },
      emphasis: {
        label: {
          show: true,
          color: "#fff"
        }
      },
      roam: false,
      itemStyle: {
        // normal: {
        areaColor: "#031525",
        borderWidth: 0,
        borderColor: "#00ffff",
        shadowColor: "#3C8CE7",
        shadowBlur: 15
        // },
      },
      emphasis: {
        itemStyle: {
          areaColor: "skyblue", // 鼠标选择区域颜色
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        },
        label: {
          show: true,
          fontSize: "20",
          fontWeight: "bold",
          // shadowBlur: 50,
          color: "#034FFF"
        }
      },
      left: 30,
      right: 30,
      top: 100,
      bottom: 30
    },
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      backgroundColor: "rgba(29, 38, 71)",
      // 额外附加的阴影
      extraCssText: "box-shadow:0 0 4px rgba(11, 19, 43,0.8)",
      textStyle: {
        // color: "background-image: linear-gradient( 135deg, #FFF720 10%, #3CD500 100%);",
        fontsize: 30
      }
    },
    grid: {
      bottum: "10%",
      left: "50%",
      width: "110%"
    },
    series: [
      {
        name: "活跃人数分布",
        type: "heatmap",
        //   zoom:4.3,
        coordinateSystem: "geo",
        blurSize: 30,
        data: []
      }
    ]
  });
  myChart.on("click", function(params) {
    // console.log(params.name);
    chart_pro.value = params.name;
    menushow.menu = params.name;
  });
};
menushow.$subscribe((arg, state) => {
  //需要写在数据变化前面
  // console.log("subscribe", arg, state);
});
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.cont {
}
/* .title{
  height: 15%;
  width: 100%;
  background-color: aquamarine;
} */
.china_map {
  height: 100%;
  width: 100%;
}

#map {
  height: 50vh;
  width: 100%;
  /* background-color: red; */
}
</style>